<!DOCTYPE html>

<head>
    <link rel="icon" href="/img/favicon.png" type="image/png">
    <link rel="stylesheet" href="/css/styles.min.css">
    <meta charset="UTF-8">
    <meta name="viewprot" content="width=device-width, initial-scale=1.0">
    <title>五子棋</title>
</head>

<style>
    *{margin:0;padding:0;box-sizing:border-box}
    html{font-size:16px}
    input{font-size:14px}
    body{line-height:1.4;color:#333;font-family:Helvetica,Arial,sans-serif}
    h1{margin-bottom:16px}
    label{display:block;font-size:14px;margin-bottom:8px;color:#777}
    input{border:1px solid #eee;padding:12px;outline:none}
    button{cursor:pointer;padding:12px;background: #bfa65c;border:none;color:#fff;font-size:16px;transition:background .3s ease}
    button:hover{background: #b89247
    }
    button:disabled{cursor:default;background: #bfb25c
    }
    .centered-form{background:#333744;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}
    .centered-form__box{box-shadow:0 0 17px 1px #1D1F26;background:#F7F7FA;padding:24px;width:700px}
    .centered-form button{width:100%}
    .centered-form input{margin-bottom:16px;width:100%}
</style>

<body>
    <div class="centered-form">
        <div class="centered-form__box">
            <form action="play.html">
                <h1 ><img src="./img/playA.png"><img src="./img/playB.png">五子棋</h1>
                <label>用户名</label>
                <input type="text" name="username" placeholder="输入用户名" required>
                <label>房间号</label>
                <input type="text" name="room" placeholder="输入房间号，如果为空则创建房间">
                <button>开始游戏</button>
            </form>
        </div>
    </div>
</body>